<style scoped>
.bottom-Bar {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 99;
	height: 8vh;
	width: 100%;
	border-top: 1px solid #e5e5e5;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	background: white;
}
.bottom-Bar img {
	width: 3.5vh;
	height: 3.5vh;
}
.bottom-Bar .active img {
	width: 3.6vh;
	height: 3.6vh;
}
.bottom-Bar .item {
	width: 34vw;
	text-align: center;
	color: #cccccc;
}
.bottom-Bar .item:active {
	transform: scale(0.95);
}
.bottom-Bar .active {
	color: #73adfd;
}
</style>
<template>
	<div class="bottom-Bar box-shadow-low">
		<div
			class="item"
			v-for="(item, i) in list"
			:key="i"
			:class="{ active: active === i }"
			@click="$router.push(item.path)"
		>
			<img v-if="i == active" :src="item.url2" alt="" />
			<img v-else :src="item.url1" alt="" />
			<p>{{ item.name }}</p>
		</div>
	</div>
</template>
<script>
import home2 from "@/img/home2.png";
import home1 from "@/img/home1.png";
import exchange2 from "@/img/exchange2.png";
import exchange1 from "@/img/exchange1.png";
import my2 from "@/img/my2.png";
import my1 from "@/img/my1.png";
export default {
	name: "BottomNav",
	props: {
		active: Number,
	},
	data: () => ({
		list: [
			{
				path: "./home",
				name: "学校简介",
				url2: home2,
				url1: home1,
			},
			// {
			// 	path: "./exchange",
			// 	name: "积分商城",
			// 	url2: exchange2,
			// 	url1: exchange1,
			// },
			{
				path: "./",
				name: "个人中心",
				url2: my2,
				url1: my1,
			},
		],
	}),
	methods: {},
};
</script>
